<template>
  <view class="coach-comment-card detail-card ss-p-30" v-if="state.commentList.length > 0">
    <view class="comment-header ss-flex ss-row-between ss-col-center ss-m-b-30">
      <view class="section-title">学员评价</view>
      <view class="comment-summary ss-flex ss-col-center">
        <view class="rating-info ss-flex ss-col-center ss-m-r-20">
          <text class="rating-score">{{ state.summary.avgRating || 5.0 }}</text>
          <view class="rating-stars ss-flex ss-col-center ss-m-l-8">
            <text class="star-icon" v-for="i in 5" :key="i" 
              :class="{ 'active': i <= Math.floor(state.summary.avgRating || 5) }">★</text>
          </view>
        </view>
        <text class="comment-count">({{ state.summary.totalCount || 0 }}条评价)</text>
      </view>
    </view>

    <view class="comment-list">
      <view 
        v-for="comment in state.commentList.slice(0, 3)" 
        :key="comment.id"
        class="comment-item ss-m-b-30"
      >
        <view class="comment-user ss-flex ss-col-center ss-m-b-16">
          <image class="user-avatar" :src="comment.userAvatar || '/static/default-avatar.png'" />
          <view class="user-info ss-m-l-16">
            <view class="user-name">{{ comment.userName || '匿名用户' }}</view>
            <view class="comment-time">{{ formatTime(comment.createTime) }}</view>
          </view>
          <view class="comment-rating ss-flex ss-col-center">
            <text class="star-icon" v-for="i in 5" :key="i" 
              :class="{ 'active': i <= comment.rating }">★</text>
          </view>
        </view>
        
        <view class="comment-content">
          {{ comment.content || '用户没有留下评价内容' }}
        </view>
        
        <view class="comment-images ss-flex ss-m-t-16" v-if="comment.images && comment.images.length">
          <image 
            v-for="(image, index) in comment.images.slice(0, 3)" 
            :key="index"
            class="comment-image"
            :src="image"
            mode="aspectFill"
            @tap="previewImage(comment.images, index)"
          />
        </view>
      </view>
    </view>

    <view class="view-more ss-flex ss-col-center ss-row-center" @tap="goToCommentList">
      <text class="more-text">查看全部评价</text>
      <text class="cicon-forward"></text>
    </view>
  </view>
  
  <view class="coach-comment-card detail-card ss-p-30" v-else>
    <view class="section-title ss-m-b-20">学员评价</view>
    <view class="no-comment ss-flex ss-flex-col ss-col-center ss-row-center">
      <image class="no-comment-icon" src="/static/no-comment.png" />
      <text class="no-comment-text">暂无评价</text>
    </view>
  </view>
</template>

<script setup>
  import { reactive, onMounted } from 'vue';
  import sheep from '@/sheep';
  import CommentApi from '@/sheep/api/product/comment';

  const props = defineProps({
    coachId: {
      type: [String, Number],
      required: true,
    },
  });

  const state = reactive({
    commentList: [],
    summary: {
      avgRating: 5.0,
      totalCount: 0,
    },
    loading: false,
  });

  // 格式化时间
  const formatTime = (time) => {
    if (!time) return '';
    const date = new Date(time);
    const now = new Date();
    const diff = now - date;
    
    if (diff < 60000) {
      return '刚刚';
    } else if (diff < 3600000) {
      return Math.floor(diff / 60000) + '分钟前';
    } else if (diff < 86400000) {
      return Math.floor(diff / 3600000) + '小时前';
    } else if (diff < 2592000000) {
      return Math.floor(diff / 86400000) + '天前';
    } else {
      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
    }
  };

  // 预览图片
  const previewImage = (images, current) => {
    uni.previewImage({
      urls: images,
      current: current,
    });
  };

  // 跳转到评价列表页
  const goToCommentList = () => {
    sheep.$router.go('/pages/coach/comment', {
      coachId: props.coachId,
    });
  };

  // 获取评价数据
  const getCommentList = async () => {
    try {
      state.loading = true;
      
      // 这里使用商品评价接口，因为教练也是以商品形式存储
      const { code, data } = await CommentApi.getCommentPage(props.coachId, 1, 3, 0);
      
      if (code === 0 && data) {
        state.commentList = data.list || [];
        state.summary = {
          avgRating: data.avgRating || 5.0,
          totalCount: data.total || 0,
        };
      }
    } catch (error) {
      console.error('获取评价失败:', error);
      // 模拟数据
      state.commentList = [
        {
          id: 1,
          userName: '学员小王',
          userAvatar: '/static/default-avatar.png',
          rating: 5,
          content: '教练很有耐心，教学方法很好，推荐！',
          createTime: new Date().getTime() - 86400000,
          images: [],
        },
        {
          id: 2,
          userName: '学员小李',
          userAvatar: '/static/default-avatar.png',
          rating: 5,
          content: '通过率很高，教练人很好，值得推荐！',
          createTime: new Date().getTime() - 172800000,
          images: [],
        },
      ];
      state.summary = {
        avgRating: 5.0,
        totalCount: 2,
      };
    } finally {
      state.loading = false;
    }
  };

  onMounted(() => {
    if (props.coachId) {
      getCommentList();
    }
  });
</script>

<style lang="scss" scoped>
  .coach-comment-card {
    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
      position: relative;
      padding-left: 20rpx;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 32rpx;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 3rpx;
      }
    }
    
    .comment-summary {
      .rating-info {
        .rating-score {
          font-size: 32rpx;
          font-weight: 600;
          color: #ff6b35;
        }
        
        .rating-stars {
          .star-icon {
            font-size: 20rpx;
            color: #ddd;
            margin-right: 2rpx;
            
            &.active {
              color: #ffa500;
            }
          }
        }
      }
      
      .comment-count {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }

  .comment-item {
    border-bottom: 1rpx solid #f0f0f0;
    padding-bottom: 30rpx;
    
    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    
    .comment-user {
      .user-avatar {
        width: 60rpx;
        height: 60rpx;
        border-radius: 30rpx;
      }
      
      .user-info {
        flex: 1;
        
        .user-name {
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
          margin-bottom: 4rpx;
        }
        
        .comment-time {
          font-size: 22rpx;
          color: #999999;
        }
      }
      
      .comment-rating {
        .star-icon {
          font-size: 20rpx;
          color: #ddd;
          margin-right: 2rpx;
          
          &.active {
            color: #ffa500;
          }
        }
      }
    }
    
    .comment-content {
      font-size: 28rpx;
      line-height: 1.5;
      color: #666666;
    }
    
    .comment-images {
      gap: 12rpx;
      
      .comment-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 8rpx;
      }
    }
  }

  .view-more {
    padding: 20rpx 0;
    border-top: 1rpx solid #f0f0f0;
    
    .more-text {
      font-size: 26rpx;
      color: #666666;
      margin-right: 8rpx;
    }
    
    .cicon-forward {
      font-size: 20rpx;
      color: #999999;
    }
  }

  .no-comment {
    padding: 60rpx 0;
    
    .no-comment-icon {
      width: 120rpx;
      height: 120rpx;
      margin-bottom: 20rpx;
      opacity: 0.5;
    }
    
    .no-comment-text {
      font-size: 26rpx;
      color: #999999;
    }
  }
</style>
